<template>
  <div class="page-container serve-analysis">
    <div class="box-title">服务运营分析</div>
    <el-card class="card1" shadow="none" style="margin-bottom: 15px">
      <div class="f-r a-c">
        <div v-for="(item,index) in tagList" :key="index" class="f-1 f-r a-c" :span="5">
          <el-image :src="item.img" style="width:70px;height: 70px " />
          <div class="group_37 f-c j-b">
            <span class="text_15">{{ item.name }}</span>
            <div class="text-wrapper_26 f-r a-e">
              <span class="text_16">{{ item.value }}</span>
              <span class="text_17">{{ item.unit }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-row :gutter="30" style="margin-bottom: 15px">
      <el-col :span="12">
        <div class="box-title">服务成本分析</div>
        <el-card shadow="none">
          <div style="height: 440px">
            <v-chart autoresize :option="option1" style="width: 100%;height: 100%" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <div class="box-title">服务成本分析</div>
        <el-card shadow="none">
          <div style="height: 415px">
            <el-form inline>
              <el-form-item label="服务类型：">
                <el-select v-model="card3SearchParams.value1" placeholder="请选择">
                  <el-option
                    v-for="item in selectOption1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="分析维度：">
                <el-select v-model="card3SearchParams.value2" placeholder="请选择">
                  <el-option
                    v-for="item in selectOption2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <el-table
              :data="tableData1"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
            >
              <el-table-column
                v-for="item in columns1"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                align="center"
              />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="15">
        <div class="box-title">服务价值排行</div>
        <el-card shadow="none">
          <div style="height: 385px">
            <el-table
              :data="tableData2"
              height="100%"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
            >
              <el-table-column
                v-for="item in columns2"
                :key="item.prop"
                :sortable="item.sortable"
                :prop="item.prop"
                :label="item.label"
                :min-width="item.minWidth"
                align="center"
              />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <div class="box-title">应用成效完成情况</div>
        <el-card shadow="none">
          <div class="card-last f-c a-c j-c" style="height: 385px">
            <div class="card-last--titlebox">
              已完成：3089
            </div>
            <div class="card-last--chartbox f-g f-r a-c j-a">
              <div
                v-for="(item,index) in option2List"
                :key="index"
                class="f-1 chartbox-item f-c a-c"
              >
                <div
                  class="f-g"
                  :style="{ position: 'relative',width: '150px', height: '150px', backgroundColor: item.bg, borderRadius: '50%', overflow: 'hidden'}"
                >
                  <v-chart autoresize :option="item.option" style="width: 100%;height: 100%" />
                  <div class="cartbox-center-text">
                    <div class="cartbox-center-title">已完成</div>
                    <div class="cartbox-center-value">{{ item.count1 }}%</div>
                  </div>
                </div>
                <div class="chartbox-text">
                  <div class="chartbox-name">{{ item.name }}</div>
                  <div class="chartbox-value">未完成：{{ item.count2 }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Index',
  data() {
    return {
      tagList: [
        {
          name: '服务发布总数',
          unit: '个',
          value: 2000,
          img: require('@/assets/serve-analysis/1.png')
        },
        {
          name: '服务订阅总数',
          unit: '个',
          value: 2000,
          img: require('@/assets/serve-analysis/2.png')
        },
        {
          name: '服务申请部门',
          unit: '个',
          value: 2000,
          img: require('@/assets/serve-analysis/3.png')
        },
        {
          name: '评价综合得分 ',
          unit: '分',
          value: 2000,
          img: require('@/assets/serve-analysis/4.png')
        },
        {
          name: '应用成效完成情况',
          unit: '%',
          value: 2000,
          img: require('@/assets/serve-analysis/5.png')
        }
      ],
      option1: {
        legend: {
          show: true,
          right: 0,
          top: 0,
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 40,
          icon: 'rect',
          data: [
            { name: '数据工具' },
            { name: '数据应用' },
            { name: '数据服务' }
          ]
        },
        grid: {
          left: '0',
          right: '0',
          top: 70,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
          textStyle: {
            color: '#999999'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
            }
          }
        },
        yAxis: {
          type: 'value',
          textStyle: {
            color: '#999999'
          }

        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: [
          {
            name: '数据工具',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            stack: 'total',
            barWidth: 30,
            itemStyle: {
              color: '#0052D9'
            }
          },
          {
            name: '数据应用',
            stack: 'total',
            barWidth: 30,
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            itemStyle: {
              color: '#2F7EFF'
            }
          },
          {
            name: '数据服务',
            stack: 'total',
            barWidth: 30,
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            itemStyle: {
              color: '#8AB6FF'
            }
          }
        ]
      },
      card3SearchParams: {
        value: 1,
        value2: ''
      },
      selectOption1: [],
      selectOption2: [],
      tableData1: [
        {
          服务名称: '华为DGC'
        },
        {
          服务名称: '华为DGC'
        },
        {
          服务名称: '华为DGC'
        },
        {
          服务名称: '华为DGC'
        },
        {
          服务名称: '华为DGC'
        }
      ],
      columns1: [
        { prop: '服务名称', label: '服务名称', width: '', minWidth: '' },
        { prop: '服务厂商', label: '服务厂商', width: '', minWidth: '' },
        { prop: 'CPU', label: 'CPU', width: '', minWidth: '' },
        { prop: '内存', label: '内存', width: '', minWidth: '' },
        { prop: '硬盘', label: '硬盘', width: '', minWidth: '' },
        { prop: '硬盘占用率', label: '硬盘占用率', width: '', minWidth: '' },
        { prop: '服务价值', label: '服务价值', width: '', minWidth: '' }
      ],
      tableData2: [
        {
          服务名称: '华为DGC'
        },
        {
          服务名称: '华为DGC'
        },
        {
          服务名称: '华为DGC'
        },
        {
          服务名称: '华为DGC'
        },
        {
          服务名称: '华为DGC'
        }
      ],
      columns2: [
        { prop: '服务名称', label: '服务名称', width: '', minWidth: '' },
        { prop: '服务类型', label: '服务类型', width: '', minWidth: '' },
        { prop: '发布单位', label: '发布单位', width: '', minWidth: '' },
        { prop: '订阅次数', label: '订阅次数', width: '', minWidth: '', sortable: true },
        { prop: '申请部门数', label: '申请部门数', width: '', minWidth: '120px', sortable: true },
        { prop: '应用成效完成度', label: '应用成效完成度', width: '', minWidth: '120px', sortable: true },
        { prop: '本月评价SLO', label: '本月评价SLO', width: '120px', minWidth: '120px', sortable: true },
        { prop: '服务价值', label: '服务价值', width: '', minWidth: '' }
      ],
      option2List: [
        {
          name: '数据工具',
          option: this.getOption2(80, '#BFDAFF', '#427DF6'),
          count1: 100,
          count2: 80,
          color: '',
          bg: '#EBF3FE'
        },
        {
          name: '数据应用',
          option: this.getOption2(65, '#BAFFEF', '#14C6B3'),
          count1: 100,
          count2: 80,
          bg: '#E8FDFA'
        },
        {
          name: '数据服务',
          option: this.getOption2(25, '#FFEEC5', '#FF9900'),
          count1: 100,
          count2: 80,
          bg: '#FEFAEB'
        }
      ]
    }
  },
  methods: {
    getOption2(value, color1, color2) {
      return {
        angleAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          min: 0,
          max: 100,
          boundaryGap: ['0', '100'],
          startAngle: 90
        },
        radiusAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          data: ['a', 'b', 'c'],
          z: 10
        },
        polar: {
          radius: '80%'
        },
        series: [{
          type: 'bar',
          data: [, , value],
          z: 1,
          coordinateSystem: 'polar',
          barMaxWidth: 40,
          name: '警告事件',
          roundCap: false,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: color1
          },
          {
            offset: 1,
            color: color2
          }
          ]),
          barGap: '-100%'
        }, {
          type: 'pie',
          z: -1,
          radius: [0, '55%'],
          itemStyle: {
            borderWidth: 0,
            shadowBlur: 20,
            shadowOffsetX: 2,
            shadowOffsetY: 0,
            shadowColor: 'rgba(64,123,246,0.59)'
          },
          data: [{
            value: 100,
            itemStyle: {
              color: '#fff'
            }
          }]
        }]
      }
    }
  }
}
</script>

<style lang="scss">
.serve-analysis {
  .box-title {
    height: 20px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin-bottom: 15px;
  }
  .card-last--titlebox {
    width: 400px;
    height: 55px;
    background: #8AB6FF;
    border-radius: 5px;
    line-height: 55px;
    text-align: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
  }
  .card-last--chartbox {
    width: 100%;
    padding-top: 60px;
    .chartbox-item {
      width: 90%;
      .chartbox-text {
        text-align: center;
        margin-top: 20px;
        .chartbox-name {
          font-size: 16px;
          line-height: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          margin-bottom: 20px;
        }
        .chartbox-value {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          text-decoration: underline;
          color: #CF4343;
          line-height: 14px;
        }
      }
      .cartbox-center-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 100%;
        .cartbox-center-title {
          height: 14px;
          line-height: 14px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 500;
          color: #333333;
          margin-bottom: 5px;
          margin-top: 5px;
        }
        .cartbox-center-value {
          color: #427DF6;
          line-height: 20px;
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 600;
        }
      }
    }
  }
  .card1 {
    .el-card__body {
      padding: 45px 20px !important;
    }
    .group_37 {
      padding: 4px 15px;
      height: 70px;
    }
    .text_15 {
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
    }
    .text_16 {
      overflow-wrap: break-word;
      color: #333333;
      font-size: 30px;
      line-height: 30px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
    }
    .text_17 {
      line-height: 16px;
      overflow-wrap: break-word;
      color: rgba(153, 153, 153, 1);
      font-size: 16px;
      font-family: MicrosoftYaHei;
      text-align: left;
      white-space: nowrap;
      margin-bottom: 5px;
      margin-left: 4px;
    }
  }
}

</style>
